<template>
  <div>
    <vue-cal
      :events="events"
      activeView="month"
      todayButton
      :time-from="9 * 60"
      :time-to="18 * 60"
      :disable-views="['years', 'year']"
      :time-step="30"
      showAllDayEvents
      events-count-on-year-view
      :editable-events="{ title: true, drag: false, resize: true, delete: true, create: true }"
      @event-click="onEventClick"
      @view-change="onViewChange"
      @ready="onReady"
      locale="zh-cn"
    ></vue-cal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import VueCal from 'vue-cal'
import 'vue-cal/dist/i18n/zh-cn.es.js'
import 'vue-cal/dist/vuecal.css'

const props = defineProps({
  date: {
    type: Date,
    required: true,
  },
})

const events = ref<any[]>([
  {
    id: 1,
    start: 'Sun Dec 15 2024 12:00:00 GMT+0800 ',
    end: '2024-12-15T12:00:00Z',
    title: '2024年市场战略研讨会',
    content:
      '<p><strong>会议时间：</strong></br>2024年12月20日 10:00 - 12:00</p>        <p><strong>会议地点：</strong></br>总部大厦8楼会议室B</p><p><strong>会议状态：</strong></br><span class="status ongoing">进行中</span></p><p><strong>主持人：</strong></br>张三</p>',
    class: 'blue-event',
    deletable: false,
    resizable: false,
    draggable: false,
  },
  {
    id: 2,
    start: '2024-12-11 14:00',
    end: '2024-12-11 16:00',
    title: '年度财务审计总结会议',
    content:
      '<p><strong>会议时间：</strong></br>2024年12月22日 14:00 - 16:00</p><p><strong>会议地点：</strong></br>总部大厦12楼会议室A</p><p><strong>会议状态：</strong></br><span class="status upcoming">即将开始</span></p><p><strong>主持人：</strong></br>李四</p>',
    class: 'orange-event',
    deletable: true,
    resizable: false,
    draggable: true,
  },
  {
    id: 3,
    start: '2024-12-12 14:00',
    end: '2024-12-12 18:00',
    title: '2023年度回顾与2024规划',
    content:
      '<p><strong>会议时间：</strong></br>2025年01月10日 10:00 - 12:00</p><p><strong>会议地点：</strong></br>总部大厦3楼会议室C</p><p><strong>会议状态：</strong></br><span class="status upcoming">即将开始</span></p><p><strong>主持人：</strong></br>王五</p>',
    class: 'green-event',
    deletable: true,
    resizable: true,
    draggable: true,
  },
  {
    id: 4,
    start: '2023-11-15 09:00',
    end: '2023-11-15 11:00',
    title: '产品开发需求讨论会',
    content:
      '<p><strong>会议时间：</strong></br>2023年11月15日 09:00 - 11:00</p><p><strong>会议地点：</strong></br>总部大厦5楼会议室D</p><p><strong>会议状态：</strong></br><span class="status completed">已结束</span></p><p><strong>主持人：</strong></br>赵六</p>',
    class: 'gray-event',
    deletable: false,
    resizable: false,
    draggable: false,
  },
  {
    id: 5,
    start: '2024-01-05 15:00',
    end: '2024-01-05 17:00',
    title: '技术团队培训会',
    content:
      '<p><strong>会议时间：</strong></br>2024年01月05日 15:00 - 17:00</p><p><strong>会议地点：</strong></br>总部大厦9楼培训室A</p><p><strong>会议状态：</strong></br><span class="status upcoming">即将开始</span></p><p><strong>主持人：</strong></br>陈七</p>',
    class: 'purple-event',
    deletable: true,
    resizable: true,
    draggable: true,
  },
])

const onEventClick = (event: any) => {
  console.log('Clicked event:', event)
  // alert(`点击了事件: ${event.title}`)
}

const onViewChange = (view: any) => {
  // console.log('View changed to:', view)
}

const onReady = (data: any) => {
  console.log('Calendar is ready:', data)
}

onMounted(() => {
  // 初始化时设置当前日期
  events.value.forEach((event) => {
    event.start = new Date(event.start).toISOString().split('T')[0]
    event.end = new Date(event.end).toISOString().split('T')[0]
  })
})
</script>

<style scoped>
/* 自定义样式 */
.vuecal__cell-content {
  cursor: pointer;
}
.vuecal {
  max-height: 85vh;
}
</style>
